<!-- 排单出货进度图表 -->
<template>
  <div class="schedule-shipments">
    <sub-title :title="title" />
    <base-echarts :options="chartOptions"></base-echarts>
  </div>
</template>

<script>
import * as echarts from "echarts";
import BaseEcharts from "@/components/BaseEcharts.vue";
import SubTitle from "@/components/SubTitle.vue";
export default {
  name: "ScheduleShipments",
  components: {
    BaseEcharts,
    SubTitle,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    seriesName1: {
      type: String,
      default: "当日排单进度（%）",
    },
    seriesName2: {
      type: String,
      default: "当日排单量",
    },
    // 排单量颜色
    scheduleColor:{
      type:Array,
      default:()=>[]
    },
    // 预算量颜色
    budgetColor:{
      type:Array,
      default:()=>[]
    },
    xAxisData:{
      type:Array,
      default:()=>[]
    },
    seriesData:{
      type:Array,
      default:()=>[]
    },
    seriesData1:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {};
  },
  computed: {
    chartOptions() {
      return {
        color:[this.scheduleColor[0],this.budgetColor[0]],
        legend: {
          icon:"rect",
          itemWidth: 9,
          itemHeight: 4,
          itemGap: 16,
          top: 0,
          right: 30,
          textStyle: {
            fontSize: 12,
            color: "#fff",
            fontFamily: "Microsoft YaHei",
          },
        },
        grid: {
          bottom: "14%",
          top: "16%",
          right: "10%",
          left: "14%",
        },
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xAxisData,
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#FEFEFE",
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#203044",
            },
          },
        },
        yAxis: [{
          name: "单位：%",
          nameTextStyle: {
            align: "center",
            color: "#fff",
            fontSize: 12,
            fontFamily: "Microsoft YaHei",
          },
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#263649",
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#FFFFFF",
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
            },
          },
        },{
          name: "",
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
           show:false
          },
        }],
        series: [
          {
            name: this.seriesName2,
            yAxisIndex: 1,
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 0,
            data: this.seriesData,
            lineStyle: {
              color: this.scheduleColor[0],
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: this.scheduleColor[1],
                    },
                    {
                      offset: 1,
                      color: "transparent",
                    },
                  ],
                  false,
                ),
              },
            },
          },
          {
            name: this.seriesName1,
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 0,
            data: this.seriesData1,
            lineStyle: {
              color: this.budgetColor[0],
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color:this.budgetColor[1],
                    },
                    {
                      offset: 1,
                      color: "transparent",
                    },
                  ],
                  false,
                ),
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style scoped lang="scss">
.schedule-shipments {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
